<template>  
  <footer class="footer">  
    <div  
      class="footer-item"  
      :class="{ active: activeTab === 'home' }"  
      @click="switchTab('home')"  
    >  
      <i class="iconfont icon-home"></i>  
      <img :src="require('@/assets/home/mob_46.png')" alt="驾驶舱">  
      <h5>驾驶舱</h5>  
    </div>  
    <div  
      class="footer-item"  
      :class="{ active: activeTab === 'device' }"  
      @click="switchTab('device')"  
    >  
      <i class="iconfont icon-device"></i>  
      <img :src="require('@/assets/home/mob_48.png')" alt="设备管理">  
      <h5>设备管理</h5>  
    </div>  
    <div  
      class="footer-item"  
      :class="{ active: activeTab === 'mobileRepair' }"  
      @click="switchTab('mobileRepair')"  
    >  
      <i class="iconfont icon-repair"></i>  
      <img :src="require('@/assets/home/mob_50.png')" alt="巡检管理">  
      <h5>巡检管理</h5>  
    </div>  
    <div  
      class="footer-item"  
      :class="{ active: activeTab === 'maintenance' }"  
      @click="switchTab('maintenance')"  
    >  
      <i class="iconfont icon-maintain"></i>  
      <img :src="require('@/assets/home/mob_53.png')" alt="维保管理">  
      <h5>维保管理</h5>  
    </div>  
    <div  
      class="footer-item"  
      :class="{ active: activeTab === 'inspection' }"  
      @click="switchTab('inspection')"  
    >  
      <i class="iconfont icon-inspect"></i>  
      <img :src="require('@/assets/home/mob_50.png')" alt="我的">  
      <h5>我的</h5>  
    </div>  
  </footer>  
</template> 

<script>  
export default {  
  name: "BottomNav",  
  data() {  
    return {  
      activeTab: "home",  
    };  
  },  
  methods: {  
    // 切换 Tab 并跳转页面  
    switchTab(tab) {  
      this.activeTab = tab;  
      let path = "/";  
      switch (tab) {  
        case "home":  
          path = "/home";  
          break;  
        case "device":  
          path = "/device";  
          break;  
        case "mobileRepair":
          path = "/mobileRepair";  
          break;  
        case "maintenance":
          path = "/maintenance";
          break;  
        case "inspection":  
          path = "/inspection";  
          break;  
      }  
      console.log(path)
      // 使用 Vue Router 跳转  
      this.$router.push(path);  
    },  
  },  
};  
</script>  

<style scoped>  
.footer {  
  display: flex;  
  justify-content: space-around;  
  padding: 15px 0;  
  background-color: #f2f2f2;  
}  
.footer-item {  
  text-align: center;  
  flex: 1;  
  cursor: pointer;  
}  
.footer-item img {  
  width: 30%;  
}  
.footer-item h5 {  
  font-size: 12px;  
  margin-top: 5px;  
}  
.footer-item.active h5 {  
  color: #007bff; /* 激活时文字颜色变蓝 */  
}  
.footer-item.active img {  
  opacity: 0.8; /* 激活时图标透明度增强 */  
}  
</style>  